<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>收货地址</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />	
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			*{
			margin: 0px;
			padding: 0px;
			}
			#head{
				background-color: #23caD0;
				position: relative;
			}
			#head a{
				color: gray;
			}
			#head h1{
				color: white;
			}
			.order header{
				position: absolute;top: 45px;
			}
			.order header a{
				color: gray;
				border: 1px solid gray;
				border-radius: 50%;
			}
			.wait{
				margin-top: 70px;
				height: 130px;
				background: white;
				position: relative;
			}
			.wait h2{
				padding-top: 20px;
				text-align: center;
			}
			.wait h5{
				font-weight:bold;
				color: gray;
				text-align: center;
			}
			.wait a{
				color: red;
				position: absolute; bottom: 20px;left: 20px;
			}
			.wait button{
				width: 70px;
				height: 30px;
				background: #23caD0;
				color: white;
				position: absolute;bottom: 20px;right: 20px;
			}
			body p{
				font-size: 20px;
				color: black;
				margin-top: 20px;
				margin-left: 20px;
			}
			.kinds{
				height: 50px;
				background: white;
				position: relative;
			}
			.kinds .kindsInfo{
				font-size: 15px;
				padding-top: 15px;
				color: gray;
			}
			.kinds .kindsInfo span{
				color: red;
				
			}
			.kinds a{
				font-size: 20px;
				color: red;
				float: right;
				margin-right: 10px;
			}
			.kinds #info{
				font-size: 15px;
				color: red;
				position: absolute;top: -5px; right: 28px;
			}
			.deliver{
				height: 150px;
				background: white;
			}
			.deliver p{
				padding-top: 10px;
				line-height: 20px;
			}
			.deliver span{
				color: red;
			}
			
			.orderinfo{
				height: 150px;
				background: white;
			}
			#get{
				height: 60px;
				background: blueviolet;
			}
			#get p{
				padding-top: 20px;
				font-size: 17px;
			}
			
			

		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav" id="head">
			   <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			   <h1 class="mui-title">袋鼠捎货</h1>
		</header>
		<div class="order">
			<header class="mui-bar mui-bar-nav">
			    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			    <h2 class="mui-title">订单详情</h2>
			</header>
		</div>
		<div class="wait">
			<h2>等待接单</h2>
			<h5>以等待1小时3分钟</h5>
			<a href="">取消订单</a>
			<button>+加钱</button>
		</div>
		<p>货品信息</p>
		<div class="kinds">
			<p class="kindsInfo">货品共计<span>7</span>箱货品，总重<span>120</span>Kg<a class="mui-icon mui-icon-arrowright"></a></p>
			<p id="info">查看详细订单</p>
		</div> 
		<p>配送信息</p>
		<div class="deliver">
			<div>
				<p>收获信息：</p>
			</div>
			<div></div>
			<div></div>
			<!--<p>收获信息：王先生&nbsp;&nbsp;&nbsp;155*****248<br />郑州市金水区绿地-峰会天下1004</p>
			
			<p>收获时间：&nbsp;&nbsp;&nbsp;明天（周三）15:00送达</p>
			
			<p>配送费：&nbsp;&nbsp;&nbsp;<span>25元</span></p>-->
		</div>
		<p>订单信息</p>
		<div class="orderinfo">
			<p id="num">订单号：354565225666</p>
			
			<p id="time">下单时间：2017-08-20&nbsp;&nbsp;&nbsp;15:30</p>
			
			<p>备注：&nbsp;&nbsp;&nbsp;麻烦配送师傅</p>
		</div>
	</body>

</html>